<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>买客(MK.COM)正品购物值得信赖</title>
	<link href="../../assests/css/system.css" charset="UTF-8" rel="stylesheet"/>
	<link href="../../assests/css/home.css" charset="UTF-8" rel="stylesheet"/>
	<script src="../../assests/js/vue.js" type="text/javascript" charset="UTF-8"></script>
	<script src="../../assests/js/index.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
	<div id="homePage" class="home" style="text-align: center;">
		<div><h3>欢迎来到买客网</h3></div>
		<div class="content">
			<div class="header">
					<div class="title">VUE制定学习计划</div><!-- title -->
					<div class="schedules">
						<span>共有 </span><span class="schedules_num">{{ items.length }}</span><span> 个计划;</span>
						<span>已完成：</span><span class="schedules_num" >{{ completed(true) }}</span>
						<span>未完成：</span><span class="schedules_num" >{{ completed(false) }}</span>
					</div><!-- schedules -->
			</div><!-- header -->
			<div class="">
				<div class="search">
					<input class="search_input" v-model="schedule" 
							 type="text" placeholder="输入学习目标,回车确认"/>
					<button :class="{search_btn:true, disabled_btn : !schedule ? true:false}" 
							  :disabled="!schedule" @click="add()" >新增计划</button>
				</div>
				<div>
					<ul class="schedule_ul_3">
						<li class="sched_tab_li_3 border_radius_l_5" 
							:class="{actived: curType == 1 ? true:false}" @click="filterItem(1)">所有计划</li>
						<li class="sched_tab_li_3" 
							:class="{actived: curType == 2 ? true:false}" @click="filterItem(2)">已完成</li>
						<li class="sched_tab_li_3 border_radius_r_5" 
							:class="{actived: curType == 3 ? true:false}" @click="filterItem(3)">未完成</li>
					</ul>
				</div>
				<div>
					<ul class="schedule_ul">
						<li class="schedule_li" v-for="(v, i) in newItems" :key="i" :data-id="i">
							<input type="checkbox" v-model="v.check"/>
							<span class="cursoor_se" :class="v.check ? 'line_through' : ''" 
									@click="addSelected(v.id)" >{{ v.name }}</span>
							<a class="schedule_a" @click="delItem(v)">删除</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div><!-- home -->
</body>
</html>
